import { Button, Select } from 'antd';
import BaseForm, { FormRefProps } from '@/component/conditions/BaseForm';
import React, { useEffect, useState } from 'react';
import {
  ConditionType,
  IfType,
  OperatorType,
} from '@/component/conditions/enum';
import { Condition } from '@/component/conditions/interface';
import styles from './index.less';
import { CloseOutlined } from '@ant-design/icons';
import { btnOptions } from '@/component/conditions/options';

const { Option } = Select;

interface GroupFormProps {
  condition: Condition;
  deleteGroup?: (item: Condition) => void;
}

export default function GroupForm(props: GroupFormProps) {
  const { condition, deleteGroup } = props;
  const [data, setData] = useState<Condition>(condition);

  useEffect(() => {
    setData(condition);
  }, [condition]);

  function addSimple() {
    data?.group?.children.push({
      type: data.group?.type,
      if: IfType[' '],
      variable: '',
      operator: OperatorType.存在,
      value: '',
      form: React.createRef<FormRefProps>(),
    });
    setData({ ...data });
  }

  function addGroup(type?: ConditionType) {
    if (type) {
      data.group?.children?.push({
        type: data.group.type,
        group: {
          type: type,
          children: [
            {
              type: type,
              if: IfType[' '],
              variable: '',
              operator: OperatorType.存在,
              value: '',
              form: React.createRef<FormRefProps>(),
            },
            {
              type: type,
              if: IfType[' '],
              variable: '',
              operator: OperatorType.存在,
              value: '',
              form: React.createRef<FormRefProps>(),
            },
          ],
        },
      });
      setData({ ...data });
    } else {
      addSimple();
    }
  }

  function deleteItem(item: Condition) {
    const index = data.group?.children?.findIndex((child) => child === item);
    if (index !== undefined) {
      data.group?.children?.splice(index, 1);
    }
    setData({ ...data });
  }

  return (
    <div className={data.type !== ConditionType.简单 ? styles.group : ''}>
      {data?.group?.children.map((item, index) => {
        return (
          <div key={index} style={{ display: 'flex' }}>
            <span style={{ width: 50, fontWeight: 'bold' }}>
              {index !== 0 ? item.type : ''}
            </span>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {item.group ? (
                <GroupForm
                  condition={item}
                  deleteGroup={() => deleteItem(item)}
                />
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  {index === 0 && (
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <div style={{ width: 100, marginRight: 16 }}>Not</div>
                      <div style={{ width: 174, marginRight: 16 }}>
                        Variable
                      </div>
                      <div style={{ width: 200, marginRight: 16 }}>
                        Operator
                      </div>
                      <div style={{ width: 100, marginRight: 16 }}>Value</div>
                    </div>
                  )}
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <BaseForm ref={item.form} initialValues={item} />
                    <CloseOutlined
                      style={{ fontSize: 18, marginTop: -24 }}
                      onClick={() => deleteItem(item)}
                    />
                  </div>
                </div>
              )}
            </div>
          </div>
        );
      })}
      {data.type !== ConditionType.简单 && (
        <div className={styles.btnGroup}>
          <Select
            placeholder={'添加'}
            style={{ width: 120, marginRight: 12 }}
            onSelect={addGroup}
          >
            {btnOptions.map((btn) => (
              <Option value={btn.value} key={btn.value}>
                {btn.label}
              </Option>
            ))}
          </Select>
          {data.group?.children?.length === 0 && deleteGroup && (
            <Button danger onClick={() => deleteGroup(data)}>
              删除
            </Button>
          )}
        </div>
      )}
    </div>
  );
}
